<template>
  <div id="inner">
    <div class="autoLeft">
      <div>
        <addUser v-show="add"></addUser>
        <updateUser v-show="updates" :personId="id"></updateUser>
        <detailed v-show="detaileds" :personId="id"></detailed>
      </div>
      <div>
        <span class="topTitle">用户管理列表</span>
        <div class="leftBox">
          <at-col>
            <!-- <at-button @click='addUser' class="addleft" type="primary"><span class="saas-icon-ten"></span>新增</at-button> -->
            <at-button @click="usersShow" type="primary" class='messageCount' size="bigger"><span class="saas-icon-page-refresh" style="position:relative;top:2px"></span><span>查看同步信息</span>
            </at-button>
            <span v-if="messageCount>0" :class="{'doubleNum':messageCount.toString().length === 2, 'singleNum': messageCount.toString().length === 1, 'more': messageCount>99, 'common': true}">
                <span class="infoCount" v-if="messageCount<=99"> {{messageCount}}</span>
                <span class="infoCount" v-else>99+</span>
            </span>
            <at-search class="searchFloat" v-model="input" placeholder="请输入用户名、用户组或机构..." type="text" project='mh'
              @keyup.enter.native="select" icon="search" :on-icon-click="select"></at-search>
          </at-col>
          <at-table :data="tableData" @filter-change="filterHandler" v-loading.body='loading' element-loading-text="拼命加载中"
            @row-click="rowClick" lable-width="100px" width="100%">
            <at-table-column prop="person_name" label="用户名" align="left" show-overflow-tooltip>
            </at-table-column>
            <at-table-column prop="user_name" label="账 号" align="left" show-overflow-tooltip>
            </at-table-column>
            <at-table-column prop="user_group_name" label="所属用户组" :filters="filters" column-key="user_name"
              show-overflow-tooltip>
            </at-table-column>
            <at-table-column prop="data_source" label="类型" :formatter="formatter" align="left" show-overflow-tooltip>
            </at-table-column>
            <at-table-column prop="agency_name" label="所属机构" align="left" show-overflow-tooltip :formatter="formatterNode">
            </at-table-column>
            <at-table-column prop="email" label="邮箱" :formatter="email" show-overflow-tooltip>
            </at-table-column>
            <at-table-column prop="mobile_phone" label="电话号码" :formatter="mobile_phone" align="left" show-overflow-tooltip>
            </at-table-column>
            <!-- <at-table-column label="操作" align="left">
              <template slot-scope="scope">
                <span class="saas-icon-pencil" style="font-size: 20px; color: rgb(31, 146, 239)" @click.stop="update(scope.row)"></span>
                <span class="saas-icon-del" style="font-size: 20px; color: rgb(31, 146, 239);" @click.stop="stopLogin(scope.row)"></span>
              </template>
            </at-table-column> -->
          </at-table>
          <Pagination :currentPage="current" :total="total" :pageSizes="pageSizes" :pageSize="pagesize" layout='total, sizes, prev, pager, next, jumper'
            @current-change="handleCurrentChange" @size-change="handleSizeChange"></Pagination>
        </div>
      </div>
    </div>
    <!-- <at-dialog title='提示' :visible.sync='suredeleteone'>
      <span>确认删除</span>
      <div slot='footer' class='dialog-footer'>
        <at-button type='primary' @click.stop='deletemsgone'>确 定</at-button>
        <at-button @click.stop='cancel'>取 消</at-button>
      </div>
    </at-dialog> -->
  </div>
</template>
<script>
  import detailed from './newdetailed.vue'
  import updateUser from './updateUser.vue'
  import addUser from './addUser.vue'
  import { mapState } from 'vuex'
  import $http from '../../../../utils/http.js'
  export default {
    name: 'users',
    data () {
      return {
        row: {},
        suredeleteone: false,
        id: '',
        input: '', // 搜索model
        pageSizes: [20, 40, 80, 100]
      }
    },
    components: {
      addUser, updateUser, detailed
    },
    computed: {
      add: {
        get () {
          return this.$store.state.users.addFlag
        },
        set (row) {
          this.$store.state.users.addFlag = row
        }
      },
      updates: {
        get () {
          return this.$store.state.users.updataFlag
        },
        set (row) {
          this.$store.state.users.updataFlag = row
        }
      },
      detaileds: {
        get () {
          return this.$store.state.users.detailedFlag
        },
        set (row) {
          this.$store.state.users.detailedFlag = row
        }
      },
      ...mapState({
        tableData: state => state.users.userDate.table, // 列表数据
        current: state => state.users.userDate.pagination.current, // 当前页码
        pagesize: state => state.users.userDate.pagination.pageSize, // 数量大小
        total: state => state.users.userDate.total, // 总数
        filters: state => state.group.optionName,
        messageCount: state => state.users.snycCount,
        loading: state => state.users.loading // loading
      }),
      testData: {
        get () {
          return this.restData
        }
      }
    },
    methods: {
      deletemsgone () {
        this.$store.dispatch('user/stopLogin', { 'person_id': this.row.person_id, 'r_person': this.$store.state.system.currentUser.user_name, 'person_name': this.row.person_name })
        this.suredeleteone = false
      },
      cancel () {
        this.suredeleteone = false
      },
      rowClick (row) {
        this.add = false
        this.updates = false
        this.detaileds = true
        this.id = row.person_id
      },
      mobile_phone (row) {
        if (row.mobile_phone === 'None' || row.mobile_phone === 'null') {
          return ''
        } else {
          return row.mobile_phone
        }
      },
      email (row) {
        if (row.email === 'None' || row.email === 'null') {
          return ''
        } else {
          return row.email
        }
      },
      formatter (row) {
        if (row.data_source === '1') {
          return '本地'
        } else {
          return '同步'
        }
      },
      formatterNode (row) {
        if (row.agency_name === '默认节点') {
          return '无'
        } else {
          return row.agency_name
        }
      },
      // 筛选
      filterHandler (value) {
        if (value['user_name'].length > 0) {
          let form = { 'user_group_id': JSON.stringify(value['user_name']) }
          var _this = this
          $http.post('api/group/id', form).then(function (response) {
            if (response.status === 'success') {
              if (response.msg.length > 0) {
                let personId = []
                for (var i = 0; i < response.msg.length; i++) {
                  personId.push(response.msg[i].person_id)
                }
                _this.$store.commit('user/setFilters', personId)
                _this.$store.dispatch('users/usersData')
              } else {
                _this.$store.commit('user/setFilters', ['asd'])
                _this.$store.dispatch('users/usersData')
              }
            }
          }
          ).catch(function (error) {
            console.log(error)
          })
        } else {
          this.$store.commit('user/setFilters', [])
          this.$store.dispatch('users/usersData')
        }
      },
      // 显示条数
      handleSizeChange (el) {
        this.$store.commit('user/getPageize', el)
        this.$store.dispatch('users/usersData')
      },
      // 显示第几页
      handleCurrentChange (el) {
        this.$store.commit('user/getCurrent', el)
        this.$store.dispatch('users/usersData')
      },
      // 跳转到同步信息
      usersShow () {
        this.$router.push('user/userSyn')
      },
      // 跳转到新增用户信息
      addUser () {
        this.add = true
        this.updates = false
        this.detaileds = false
      },
      // 跳转到修改信息界面
      update (row) {
        this.id = row.person_id
        this.add = false
        this.updates = true
        this.detaileds = false
      },
      // 禁用用户
      stopLogin (row) {
        this.suredeleteone = true
        this.row = row
      },
      select () {
        // 搜索
        this.$store.commit('user/getValues', this.input)
        this.$store.dispatch('users/usersData')
      }
    },
    mounted () {
      this.$store.dispatch('users/usersData')
      this.$store.dispatch('group/getOptions', 1)
      this.$store.dispatch('user/getSync')
    },
    watch: {
      tableData (val, oldval) {
        if (val.length > 0) {
          this.id = val[0].person_id
        }
      },
      $route (to, from) {
        if (to.name === '用户管理') {
          this.$store.dispatch('users/usersData')
          this.$store.dispatch('group/getOptions', 1)
          this.$store.dispatch('user/getSync')
        }
      }
    }
  }
</script>
<style>
  #inner .saas-icon-ten{
    font-size: 20px;
    vertical-align: -4px;
    margin-right: 5px
  }
  #inner .saas-icon-page-refresh{
    font-size: 20px;
    vertical-align: -4px;
    margin-right: 5px
  }
  #inner .doubleNum {
  width: 25px;
  margin-top: 4px;
  border-radius: 8.5px;
  }
  #inner .singleNum {
    width: 17px;
    border-radius: 50%;
    top: -15px;
    position: relative;
    left: -14px;
  }
  #inner .more {
    width: 32px;
    border-radius: 8.5px;
  }
  #inner .common {
    font-weight: bold;
    background: #1f92ef;
    display: inline-block;
    height: 17px;
    position: relative;
    left: -14px;
    top: -15px;
  }
  #inner .infoCount {
    display: block;
    color: #FFFFFF;
    height: 17px;
    line-height: 18px;
    text-align: center;
    font-size : 10px;
    -webkit-transform : scale(0.84,0.84) ;
    *font-size:10px;
  }
  #inner .searchFloat {
    float: right;
  }

  #inner .leftBox {
    padding: 10px 20px 20px 20px
  }

  #inner .topTitle {
    display: block;
    border-bottom: 1px solid #EEE;
    height: 50px;
    line-height: 50px;
    font-size: 14px;
    padding-left: 20px;
    color: #5c6781;
    font-weight: bold;
  }

  #inner .messageCount {
    position: relative !important;
  }

  #inner .autoLeft {
    overflow: hidden;
    /*    min-height: 900px;*/
  }

  #inner .autoLeft>div:nth-child(1) {
    float: right;
    min-width: 478px;
    max-width: 478px;
    background-color: white;
  }

  #inner .autoLeft>div:nth-child(2) {
    margin-right: 498px;
    border-right: 1px solid #EEE;
    background-color: white;
    /*    margin-bottom: -900px;
    padding-bottom: 900px*/
  }

  #inner .msg {
    border-radius: 50%;
    background-color: #1f92ef;
    color: #fff;
    position: absolute;
    width: 17px;
    height: 17px;
    text-align: center;
    line-height: 17px;
    right: -8px;
    top: -8px;
    font-size: 10px;
  }

  #inner .maxMsg {
    width: 25px;
    height: 25px;
    line-height: 25px;
    top: -10px;
    right: -13px;
  }

  #inner>.at-col {
    background-color: white;
  }

  #inner>.at-col:nth-child(1) {
    float: none;
    padding: 10px 20px 9px 20px;
    border-bottom: 1px solid #EEE;
  }

  .tableBox {
    padding: 15px;
    border: 1px solid #EEE
  }

  #inner.top {
    overflow: hidden;
  }

  #inner .inputsize {
    float: right;
  }

  #inner .floatRight {
    float: right;
  }

 /* #inner .addleft .at-button {
    width: 120px;
    height: 32px;
    margin-left: 10px
  }*/

  #inner .at-pagination {
    margin-top: 10px;
    width: 40%;
    margin: 0px auto;
    height: 30px;
    margin-top: 20px
  }

  #inner {
    overflow: hidden;
    width: 100%;
    /*   background-color: white;*/
    min-height: 900px;
  }

  #inner .at-button+.at-button {
    margin: 0;
    position: relative;
  }
</style>